<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head
	th:replace="header/h5header::h5header(${title} != null ? ${title} : '帅小铺-实体创业社群服务平台',
'/assets/H5/css/search.css,/assets/H5/css/bus.css,/assets/css/myswiper.css,/assets/layui/css/layui.css,/assets/module/admin.css',
'/assets/H5/js/flexible.js,/assets/H5/libs/index/khData.js,/assets/js/swiper.min.js
')">
</head>

<body style="font-size: 12px;">
<div class="container search-container" style="padding-top:0">
	<div class="center ">
	    <div class="search-bar">
	        <form id="search-form" action="#">
	            <div class="search-return" onclick="history.back(-1)">
	                <span class="layui-icon layui-icon-left"></span>
	            </div>
	            <button class="link-search" style="background: #fff;-webkit-appearance: none;outline: 0;">搜索</button>
	            <div class="search-area" style="padding: 0px;">
	                <span class="icon icon-search" style="display: inline-block;"></span>
	                <span class="icon icon-list-close" style="display: none;"></span>
	                <input class="ipt" type="text" name="name" placeholder="搜你想看">
	            </div>
	            <a class="submit" href="javascript:void(0)" data-sa-point="{&quot;event&quot;:&quot;e_click_search_project&quot;,&quot;properties&quot;:{&quot;fromModule&quot;:&quot;&quot;,&quot;fromItem&quot;:&quot;i_search_project&quot;,&quot;fromItemIndex&quot;:&quot;-1&quot;,&quot;toPage&quot;:&quot;p_project_list&quot;,&quot;toModule&quot;:&quot;&quot;,&quot;media_source&quot;:&quot;-1&quot;,&quot;c_creative&quot;:&quot;-1&quot;,&quot;c_adposition&quot;:&quot;-1&quot;,&quot;c_keywordid&quot;:&quot;-1&quot;,&quot;c_matchtype&quot;:&quot;-1&quot;,&quot;c_pagenum&quot;:&quot;-1&quot;,&quot;user_agent&quot;:&quot;mozilla\/5.0 (iphone; cpu iphone os 13_2_3 like mac os x) applewebkit\/605.1.15 (khtml, like gecko) version\/13.0.3 mobile\/15e148 safari\/604.1&quot;,&quot;pixel_width&quot;:&quot;375&quot;,&quot;pixel_height&quot;:&quot;667&quot;,&quot;comjia_unique_id&quot;:&quot;fa9b2a995afa93efbb7f0eb725823749&quot;,&quot;comjia_platform_id&quot;:&quot;2&quot;,&quot;product_id&quot;:2,&quot;is_new_page&quot;:&quot;0&quot;}}"></a>
	        </form>
	    </div>
	    <div class="search-row2">
            <!--热门搜索-->
            <div class="j-box2 j-search-hot">
                <div class="hd">
                    <h2>热门搜索</h2>
                </div>
                <div class="bd">
                    <div class="lb-area">
                    	<a class="s-lb" href="https://m.julive.com/cq/project/20080399.html">中交锦悦</a>                                            
                    </div>
                </div>
            </div>
            <!--历史搜索-->
            <div class="j-box2 j-search-history">
                <div class="hd ">
                    <h2>历史搜索<span class="clear btn-clear">清空</span></h2>
                </div>
                <div class="bd">
                    <div class="lb-area">
                    	<a class="s-lb" href="/cq/project?name=%E7%9A%84">的</a>                                            
                    </div>
                </div>
            </div>
		</div>
	</div>

</div>

<script type="text/javascript">
layui.use(['layer', 'form', 'formX', 'setter', 'mynotice', 'admin', 'ax', 'util', 'dataGrid', 'element'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var formX = layui.formX;
    var setter = layui.setter;
    var mynotice = layui.mynotice;
    var admin = layui.admin;
    var $ax = layui.ax;
    var util = layui.util;
    var dataGrid = layui.dataGrid;
    var element = layui.element;
    
    /* 轮播 */
	var mySwiper = new Swiper('.bnc1', {
		direction : 'horizontal', // 垂直切换选项
		autoplay : {
			delay : 5000,
			disableOnInteraction : false,
		}, // 自动切换
		loop : true, // 循环模式选项
		pagination : { // 分页器
			el : '.swiper-pagination',
			type : 'bullets',
			clickable : true,
			renderProgressbar : function(progressbarFillClass) {
				return '<span class="' + progressbarFillClass + '"></span>';
			}
		},
		navigation : { // 如果需要前进后退按钮
			nextEl : '.swiper-button-next',
			prevEl : '.swiper-button-prev',
		}
	})
    
    var sar = '', sfr = '', ser = '';
    
    
    
	var ins = dataGrid.render({
        elem: '#listUl',  // 容器
        templet: '#qqwww',  // 模板
        url: '/loadmore/h5/column/' + $('#colId').val(),  // 数据接口
        loadMore: {limit: 10},  // 开启分页
        done: function(res, curr, count){
        	
        }
    });
    
	util.event('lay-event', {
    	sele: function(){
    		$('.screen-panel').css("display", "none");
    		$('.current').removeClass("current");
    		$(this).addClass('current');
    		$('body').css({"position": "fixed", "top": "0px", "width": "100%"});
    		$('.screen').addClass("screen-fixed");
    		$(this).next().css("display", "block");
    		$('#prop').css("display", "block");
    	},
    	areaev: function(){
    		var url = '/loadmore/h5/column/' + $('#colId').val();
    		var region = $(this).data('id');
    		$('.area-list .active').removeClass('active');
    		$(this).addClass('active');
        	var format = $('.room-select .active').data('id');
        	var server = $('.server-select .active').data('id');
        	sar = region;
        	if(region != ''){
        		url += '?region=' + region;
        		$('#stag').css("display", "block");  
            	var ar = $(this).children('a').text();
            	if($("#aretagid").length > 0){
            		$('#aretagid').replaceWith('<div class="tag-item swiper-slide swiper-slide-active" id="aretagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeArea"></span></div>');
           		}else{
           			$('#tags').prepend('<div class="tag-item swiper-slide swiper-slide-active" id="aretagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeArea"></span></div>');
           		}
        	}else{
        		$('#aretagid').remove();
        	}
        	if(format != undefined && format != ''){
        		url += region == '' ? '?format=' + format : '&format=' + format;
        	}
        	if(server != undefined && server != ''){
        		url += region == '' ? '?server=' + server : '&server=' + server;
        	}
        	ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
        	propnone();
    	},
    	formatev: function(){
    		var url = '/loadmore/h5/column/' + $('#colId').val();
    		$('.room-select .active').removeClass('active');
    		$(this).addClass('active');
    		var format = $(this).data('id');
    		sfr = format;
        	var region = $('.area-list .active').data('id');
        	if(region != ''){
        		url += '?region=' + region;
        	}
        	if(format != ''){
        		url += region == '' ? '?format=' + format : '&format=' + format;
        		$('#stag').css("display", "block");  
            	var ar = $(this).children('a').text();
            	if($("#formattagid").length > 0){
                	$('#formattagid').replaceWith('<div class="tag-item swiper-slide swiper-slide-next" id="formattagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeFor"></span></div>');
            	}else{
                	$('#tags').append('<div class="tag-item swiper-slide swiper-slide-next" id="formattagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeFor"></span></div>');
            	}
        	}else{
        		$('#formattagid').remove();
        	}
        	ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
        	propnone();
    	},
    	serverev: function(){
    		var url = '/loadmore/h5/column/' + $('#colId').val();
    		$('.server-select .active').removeClass('active');
    		$(this).addClass('active');
    		var server = $(this).data('id');
    		ser = server;
        	var region = $('.area-list .active').data('id')
        	if(region != ''){
        		url += '?region=' + region;
        	}
        	if(server != ''){
        		url += region == '' ? '?server=' + server : '&server=' + server;
        		$('#stag').css("display", "block");  
            	var ar = $(this).children('a').text();
            	if($("#sertagid").length > 0){
                	$('#sertagid').replaceWith('<div class="tag-item swiper-slide swiper-slide-next" id="sertagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeSer"></span></div>');
            	}else{
                	$('#tags').append('<div class="tag-item swiper-slide swiper-slide-next" id="sertagid"><span class="txt">'+ ar +'</span><span class="icon icon-search-close" lay-event="closeSer"></span></div>');
            	}
        	}else{
        		$('#sertagid').remove();
        	}
        	ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
        	propnone();
    	},
    	closeArea: function(){
    		sar = '';
    		$(this).parent().remove();
    		if($('#tags').children().length == 0){
				$('#stag').css("display", "none");
			}
    		$('.area-list .active').removeClass('active');
			$(".area-list").children(":first").addClass('active');
    		var url = '/loadmore/h5/column/' + $('#colId').val() + '?region' + sar + '&format=' + sfr + '&server=' + ser;
			ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
    	},
		closeFor: function(){
			sfr = '';
			$(this).parent().remove();
			if($('#tags').children().length == 0){
				$('#stag').css("display", "none");
			}
			$('.room-select .active').removeClass('active');
			$(".room-select").children(":first").addClass('active');
			var url = '/loadmore/h5/column/' + $('#colId').val() + '?region' + sar + '&format=' + sfr + '&server=' + ser;
			ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
    	},
		closeSer: function(){
			ser = '';
			$(this).parent().remove();
			if($('#tags').children().length == 0){
				$('#stag').css("display", "none");
			}
			$('.server-select .active').removeClass('active');
			$(".server-select").children(":first").addClass('active');
			var url = '/loadmore/h5/column/' + $('#colId').val() + '?region' + sar + '&format=' + sfr + '&server=' + ser;
			ins.reload({
                elem: '#listUl',  // 容器
                templet: '#qqwww',  // 模板
                url: url,  // 数据接口
                loadMore: {limit: 10},  // 开启分页
                done: function(res, curr, count){
                	
                }
            });
    	}
    }) 
    
    $('#prop').on('click', function(){
		propnone();
    })
    
    function propnone(){
		$('#prop').css("display", "none");
    	$('body').css({"position": "static", "top": "0px", "width": "auto"});
		$('.screen').removeClass("screen-fixed");
		$('.screen-panel').css("display", "none");
		$('.current').removeClass("current");
	}
    
    
});

</script>

</body>
</html>